<!--
 * @Description: layout
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2024-03-07
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-05-06
-->
<script lang="ts" setup>
  import { computed } from 'vue'
  import { useRoute } from 'vue-router'

  import { useKeepAliveStore } from '/@/store/modules/keepAlive'

  const route = useRoute()
  const keepAliveStore = useKeepAliveStore()

  // 缓存的路由组件列表
  const keepAliveComponents = computed(() => keepAliveStore.list)
</script>

<template>
  <div class="layout">
    <div class="layout-main">
      <router-view v-slot="{ Component }">
        <template v-if="Component">
          <transition :name="Object.is(route.meta?.transitionName, false) ? '' : 'fade-transform'" mode="out-in" appear>
            <keep-alive :include="keepAliveComponents">
              <component :is="Component" :key="route.fullPath" />
            </keep-alive>
          </transition>
        </template>
      </router-view>
    </div>
    <div class="layout-footer">Copyright 2024 @ 云海链控股股份有限公司 琼ICP备19003338号-3</div>
  </div>
</template>

<style lang="less" scoped>
  .layout {
    height: 100%;
    position: relative;

    .layout-main {
      height: calc(100% - 40px);
      background: #f2f3f5;
      overflow: auto;
    }

    .layout-footer {
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 12px;
      color: rgb(0 0 0 / 45%);
      background: #f2f3f5;
    }
  }
</style>
